<template>
  <BaseDialog
    id="file"
    :title="$t('在线文本编辑器')"
    v-bind="$attrs"
    v-on="$listeners"
    @editorResize="editorResize"
  >
    <div class="btn-box">
      <span class="default-span" @click="submit()">{{ $t('保存') }}</span>
      <span class="default-span" @click="update()">{{ $t('刷新') }}</span>
      <span class="default-span" @click="search()">{{ $t('搜索') }}</span>
      <span class="default-span" @click="replace()">{{ $t('替换') }}</span>
      <span class="default-span" @click="jumpLine()">{{ $t('跳转行') }}</span>
      <!-- <span class="default-span" @click="theme()">主题</span> -->
      <!-- <span class="default-span" @click="fontFamily()">字体</span> -->
      <!-- <span class="default-span" @click="shortcutKey()">快捷键</span> -->
      <!-- 跳转 -->
      <el-card v-if="jumpLineFlag" class="box-card">
        <div slot="header" class="clearfix">
          <span>{{ $t('跳转到指定行') }}</span>
        </div>
        <div class="card-i">
          <el-input-number
            v-model="jumpNum"
            controls-position="right"
            :min="1"
            @keyup.enter.native="jumpGo"
          />
        </div>
        <div class="card-f">
          <span>
            当前：行 {{ currLine }} 列 {{ currColumn }}，输入行数(介于 1 -
            {{ totalLine }} 之间)
          </span>
        </div>
      </el-card>
    </div>
    <div @click="closeJumpCard">
      <Editor
        ref="editor"
        v-model="editorContents"
        :height="height"
        width="100%"
        :options="options"
        :lang="editorType"
        theme="monokai"
        @init="editorInit"
      />
    </div>
  </BaseDialog>
</template>

<script>
import BaseDialog from './bounce'
import Editor from 'vue2-ace-editor'
import mouldApi from '@/api/theme'

export default {
  components: {
    BaseDialog,
    Editor
  },
  props: ['editorContent', 'editorType', 'currPath'],
  data() {
    return {
      options: {
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true,
        tabSize: 6,
        fontSize: 14,
        showPrintMargin: false, // 去除编辑器里的竖线
        tabSize: 2, // 换行符大小
        useSoftTabs: true,
        wrap: true,
        autoScrollEditorIntoView: false
      },
      editorContents: '',
      currentPath: '',
      saveForm: {
        content: '',
        path: ''
      },
      jumpNum: '',
      currLine: 1,
      currColumn: 1,
      totalLine: 1,
      jumpLineFlag: false,
      height: '600'
    }
  },
  watch: {
    editorContent: function (val) {
      this.editorContents = val
    },
    currPath: function (val) {
      this.currentPath = val
    }
  },

  methods: {
    editorResize(val) {
      console.log(12)
      this.height = val
      this.$refs.editor.editor.resize(true)
    },
    editorInit() {
      require('brace/ext/language_tools')
      require('brace/theme/monokai')
      require('brace/mode/php')
      require('brace/mode/html')
      require('brace/mode/css')
      require('brace/mode/json')
      require('brace/snippets/json')
      require('brace/snippets/html')
      require('brace/snippets/css')
      require('brace/ext/searchbox')
      this.customEditorCommand()
    },
    // 关闭跳转 card
    closeJumpCard() {
      this.jumpLineFlag = false
    },
    // 保存编辑器内容
    submit() {
      this.saveForm.content = this.editorContents
      this.saveForm.path = this.currentPath
      mouldApi.fileUpdate({ ...this.saveForm }).then(res => {
        if (res.code == 0) {
          this.$message.success('保存成功')
        }
      })
    },
    // 刷新内容
    update() {
      // 源码查看
      mouldApi.fileRead({ path: this.currPath }).then(res => {
        if (res.code != 0) {
          return false
        }
        this.editorContents = res.data
        this.$message.success('刷新成功')
      })
    },
    // 搜索
    search() {
      this.$refs.editor.editor.execCommand('find')
    },
    // 替换
    replace() {
      this.$refs.editor.editor.execCommand('replace')
    },
    // 展示跳转样式
    jumpLine() {
      // 获取当前行
      const _cursor = this.$refs.editor.editor.selection.getCursor()
      this.currLine = _cursor.row + 1
      this.currColumn = _cursor.column + 1
      this.jumpNum = this.currLine
      this.totalLine = this.$refs.editor.editor.session.getLength()
      // 获取所有行
      this.jumpLineFlag = true
    },
    // 跳转
    jumpGo() {
      this.$refs.editor.editor.gotoLine(this.jumpNum)
      this.jumpLineFlag = false
    },
    // 自定义编辑器快捷键
    customEditorCommand() {
      const that = this
      this.$refs.editor.editor.commands.addCommand({
        name: '保存文件',
        bindKey: { win: 'Ctrl-S', mac: 'Command-S' },
        exec: function () {
          that.submit()
        },
        readOnly: true // 如果不需要使用只读模式，这里设置false
      })
      this.$refs.editor.editor.commands.addCommand({
        name: '跳转行',
        bindKey: { win: 'Ctrl-I', mac: 'Command-I' },
        exec: function () {
          that.jumpLine()
        },
        readOnly: false // 如果不需要使用只读模式，这里设置false
      })
      this.$refs.editor.editor.commands.addCommand({
        name: '快捷注释',
        bindKey: { win: 'Ctrl-/', mac: 'Ctrl-/' },
        exec: function (editor) {
          editor.toggleCommentLines()
        },
        readOnly: false // 如果不需要使用只读模式，这里设置false
      })
      this.$refs.editor.editor.commands.addCommand({
        name: '缩进',
        bindKey: { win: 'Tab', mac: 'option-Tab' },
        exec: function (editor) {
          editor.indent()
        },
        readOnly: false // 如果不需要使用只读模式，这里设置false
      })
      this.$refs.editor.editor.commands.addCommand({
        name: '整体前移',
        bindKey: { win: 'Shift-tab', mac: 'Shift-tab' },
        exec: function (editor) {
          editor.blockOutdent()
        },
        readOnly: false // 如果不需要使用只读模式，这里设置false
      })
    }
  }
}
</script>

<style lang="scss">
#file {
  .el-dialog {
    background-color: #292929;
  }
  .el-dialog__header {
    background-color: #fff;
    padding: 10px 10px 5px;
    height: 42px;
    border-bottom: 1px solid #666;
    .el-dialog__title {
      color: #292929;
      font-size: 16px;
    }
  }
  .el-dialog__body {
    padding: 0;
    position: relative;
    .box-card {
      position: absolute;
      width: 400px;
      top: 35px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
      background: #333333;
      border: none;
      color: #ffffff;
      box-shadow: 0px 0px 2px 0px #000;
      .el-card__header,
      .el-card__body {
        padding: 10px 20px;
      }
      .el-card__header {
        border-bottom: 1px solid #666666;
      }

      .el-input-number {
        width: 100%;
        height: 35px;
        line-height: 35px;
        .el-input__inner {
          height: 35px;
          line-height: 35px;
          border-radius: 0;
          border: 1px solid #fff;
        }
        span {
          border-radius: 0;
          height: 17px;
        }
      }
      .card-f {
        margin-top: 10px;
      }
    }
  }
  .btn-box {
    height: 35px;
    background-color: #565656;
    text-align: left;
    .default-span {
      float: left;
      height: 35px;
      line-height: 35px;
      padding: 0 15px;
      font-size: 13px;
      text-align: center;
      color: #fff;
      border-right: 1px solid #4c4c4c;
      cursor: pointer;
    }
  }
  .el-icon-full-screen {
    position: absolute;
    top: 14px;
    right: 50px;
    padding: 0;
    background: 0 0;
    border: none;
    outline: 0;
    cursor: pointer;
    font-size: 16px;
  }
  .el-dialog__headerbtn {
    top: 14px;
  }
}
</style>
